<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-container>
        <el-main>
          <el-table-column >
            <el-button-group>
              <el-button type="success" size="medium" class="el-icon-plus" @click="insert">添加</el-button>
            </el-button-group>
          </el-table-column>

          <el-table :data="tableData" border stripe>

            <el-table-column prop="imageurl" label="头像" width="120">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.imageurl"
                  fit="fill"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200">
              <template slot-scope="scope">

                <el-button-group>
                  <el-button @click="handleClick(scope.row.id)" type="primary" class="el-icon-edit" size="small">修改
                  </el-button>
                  <el-button type="danger" @click="deleteClick(scope.row.id)" class="el-icon-delete" size="small">删除
                  </el-button>
                  <!--                <el-button @click="deleteClick(scope.row.id)" type="text" size="medium">删除</el-button>-->
                  <!--                <el-button type="text" size="small">删除</el-button>-->
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {

    name: "merchantInfo",

    data() {
      return {
        tableData: [

          {
            imageurl:"",
            userName:"何富韬",
            address:"南窑头"
          }

        ]
      }
      return {
        visible: false,
      }
    },


    methods: {
      handleClick: function (id) {
        /*this.$router.push("/update/"+id)*/
        this.$router.push("../update/"+id)
      },

      deleteClick() {
        this.$confirm('此操作将删除该条目信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      insert:function(){
        this.$router.push("../insert/")
      },

      created() {
        //去后端请求数据
        axios.get("/api/findAll").then(res => {
          this.tableData = res.data
        })
      }
    }
  }
</script>

<style scoped>

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
